<template>
	<view class="page">
		<!-- <mt-header title="会议室"></mt-header>
		<u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="会议室" leftIconColor="#FFF"
			@rightClick="rightClick" :autoBack="true">
		</u-navbar>
		-->
		<div class="time"  >
			<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<span >{{date}}</span>
					<img   src="@/static/img/Frame.png" />
			</picker>
		</div>


		<div class="date">

			<div v-if="edifice" class="days">
				<div v-for="(v, i) in edifice.date" @click="setDay(v.day, v.week,v.month)" :key="i" class='newday'>
					<div @click="setDay(v.day, v.week,v.month)" class="week">
						<span v-html="v.weekName"></span>
					</div>
					<div @click="setDay(v.day, v.week ,v.month)" class="day">
						<div v-html="v.day" :class="{ active: v.day == day }"></div>
					</div>

				</div>
			</div>
		</div>
		<div class="room">
			<div v-for="(v, i) in room" @click="jump(v.id)" class="roomList" :key="i">
				<div class='roomTitle'>
					<span class='small' :style="v.room_type ==1 ?'background: #fc5531;':''" >{{v.room_type=="1"?'临时':'固定'}}</span>
					{{v.name}}
					<p>{{v.floor}} {{v.number}}</p>
				<div class="makeapp">预约</div>
				</div>
			</div>
		</div>
		<!--日期选择-->
		<template>
			<mt-datetime-picker ref="picker" type="date" @confirm="selectDate" :start-date="new Date()">
			</mt-datetime-picker>
		</template>

	</view>
</template>

<script>
	// #ifdef H5
	import $ from "@/static/assets/js/jquery-1.11.1.min.js";
	import {
		initMeeting
	} from "./index";

	import {
		getMeetTypesList,getRoomList,getRoomDetail,getEdifice
	} from '@/api/roomApi.js'

	export default {


		data() {
			const currentDate = this.getDate({
			            format: true
			        })

			const date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();

			return {
				  date: currentDate,
				   time: '12:01',

					typeList: [],
				typeId: {},
				show: true,
				edificeActions: [],
				addressPopup: false,
				edifice: {},
				edifices: [],
				year: year,
				month: month,
				day: day,
				room: [],
				tabbared: "index",
				startDate: new Date(),
			};
		},
		methods: {
			open() {
				// console.log('open');
			},
			closePop() {
				this.show = false
				// console.log('close');
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
				var arr = this.date.split('-');
				this.year = arr[0]
				this.month =  arr[1]
				this.day =  arr[2]
				this.getEdifice();
			},
			bindTimeChange: function(e) {
			 this.time = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			toggleEdifice() {
				this.addressPopup = !this.addressPopup;
			},
			cancel() {
				this.addressPopup = false;
			},
			getEdifice() {
				const _this = this;
				let params = {};
				params.day  = this.day;
				params.date = this.date;
				params.month = this.month;
				params.year = this.year;
				this.startDate = new Date(this.year + "/" + this.month + "/" + this.day);


        getEdifice(params).then(res => {
          if ( res.code == 1) {
            _this.edifice = res.data[0];
            if (_this.room.length < 1) {
              _this.getRoom();
            }
            _this.edifices = res.data;
          }
        })


			},
			setEdifice(item) {
				this.edifice = item;
				this.cancel();
				this.getRoom();
			},
			setDay(day, week,month) {
				this.day = day;
				this.week = week;
				this.month = month;
			},
			getRoom() {
				const _this = this;
				_this.$indicator.open("加载中...");
				let params = {};
				params.edifice_id = this.edifice.id;
				params.day = this.day;
				params.month = this.month;
				params.year = this.year;
				params.date = this.date;

				getRoomList(params).then(res => {
					console.log(res)
					_this.room = res.data ;
					_this.$indicator.close();
				})
			},
			selType(item){
				this.typeId = item;
				uni.setStorageSync('type_id', item.id);
			},
			jump(id) {
				if (!id) return;
				const url =
					"/pages/tabbar/meeting-room/show/show?id=" +
					id +
					"&day=" +
					this.day +
					"&year=" +
					this.year +
					"&month=" +
					this.month;
				uni.navigateTo({
					url,
				});
			},
			openPicker() {
				this.$refs.picker.open();
			},
			selectDate(date) {
				this.month = date.getMonth() + 1;
				this.day = date.getDate();
				this.getEdifice();
			},
			readInitDateTime() {
				let dateTime = new Date();
				let currYear = dateTime.getFullYear();
				let opt = {};
				opt.datetime = {
					preset: "date",
				};
				opt.default = {
					theme: "android-ics light", //皮肤样式
					display: "modal", //显示方式 ：modal（正中央）  bottom（底部）
					mode: "scroller", //日期选择模式
					dateFormat: "yyyy-mm-dd", // 日期格式
					lang: "zh",
					startYear: currYear - 5, //开始年份currYear-5不起作用的原因是加了minDate: new Date()
					endYear: currYear + 5, //结束年份
					minDate: new Date(), //加上这句话会导致startYear:currYear-5失效，去掉就可以激活startYear:currYear-5,
					// maxDate: new Date(dateTime.setDate(dateTime.getDate()+7)),
					onSelect: function(value) {
						let date = new Date(value.split(" ")[0].replace(/\-/g, "/"));
						vm.year = date.getFullYear();
						vm.month = date.getMonth() + 1;
						vm.day = date.getDate();
						let difValue = Math.ceil(
							(date - vm.startDate) / (1000 * 60 * 60 * 24)
						);
						if (difValue > 6) {
							vm.getEdifice();
						} else {
							vm.getRoom();
						}
					},
				};
				const optDateTime = $.extend(opt["datetime"], opt["default"]);

				$("#appDateTime1").mobiscroll(optDateTime).datetime(optDateTime);
			},
		},
		onLoad() {

			initMeeting($);
			this.readInitDateTime();
		},
		onReady() {
			this.getEdifice();

		},
		watch: {
			day() {
				this.getRoom();
			},
		},
	};

	// #endif
</script>


<style>
	@import "@/static/assets/css/index.css";
	@import "@/static/assets/css/mobiscroll.core-2.5.2.css";
	@import "@/static/assets/css/mobiscroll.animation-2.5.2.css";
	@import "@/static/assets/css/mobiscroll.android-ics-2.5.2.css";

</style>
